<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<style type="text/css">
			{
				box-sizing: border-box;
			}
			
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			
			html {
				font-size: 13.3333333333vw;
			}
			
			#box{
				height: 100%;
				display: flex;
				flex-direction: column;
				align-content: center;
				justify-content: center;
				background: url(img/p1-Loading.png) no-repeat;
				background-size: 100% 100%;
			}
			img{
				width: 3.52rem;
				height: 4.95rem;
				margin-left: 2.3rem;
			}
			#loading{
				font-size: .28rem;
				font-weight: 300;
				margin-left: 2.57rem;
				margin-top: .36rem;
			}
			#progress{
				font-size: .28rem;
				font-weight: 700;
				margin-left: 3.36rem;
				margin-top: .2rem;
			}
			
		
		</style>
	</head>

	<body>
		<div id="box">
			
			<img src="img/picture.png" />
				
		
			
				<span id="loading"></span>
			

		
				<span id="progress"></span>
		</div>
				
		
		<script type="text/javascript">
			var progress = document.getElementById('progress')
			var loading = document.getElementById('loading')

			loading.innerHTML = "LOADING "

			var num = 0;
			var timer = setInterval(function() {
				num++;
				progress.innerHTML = num + '%';

				if(num == 100) {
					clearInterval(timer)
				}

			}, 100)
			var num2 = 0
			var timer2 = setInterval(function() {
				num2++
				if(num2 % 3 == 0) {
					loading.innerHTML = "LOADING ···"
				}
				if(num2 % 3 == 1) {
					loading.innerHTML = "LOADING ·"
				}
				if(num2 % 3 == 2) {
					loading.innerHTML = "LOADING ··"
				}
				if(num == 100) {
					clearInterval(timer2)
				}
				console.log(num2)
			}, 500)
		</script>
	</body>

</html>